<settings-screen>
  <div class="row">
    <type-picker img-root="/static/images/destinations"
                 types="types"
                 title="New Alert Destination"
                 on-type-select="setType"
                 ng-if="destination.type === undefined"></type-picker>

    <div ng-if="destination.type !== undefined">
      <div class="creation-container">
        <div class="col-xs-12 col-sm-4">
          <a ng-click="resetType()" ng-if="canChangeType">← Change Type</a>
        </div>

        <div class="col-xs-12 col-sm-4  text-center">
          <img ng-src="/static/images/destinations/{{destination.type}}.png" alt="{{type.name}}" width="64">
          <h3>{{type.name}}</h3>
        </div>
      </div>

      <div class="clearboth"></div>

      <div class="col-md-4 col-md-offset-4">
        <dynamic-form target="destination" type="type">
          <button class="btn btn-danger" ng-if="destination.id" ng-click="delete()">Delete</button>
        </dynamic-form>
      </div>
    </div>
  </div>
</settings-screen>
